<template>
  <div>
    <p style="color:#f60000">{{state.stuId}}</p>

    <a-table :bordered="{cell:true}" stripe :pagination="false" :data="myData" style="margin-top: 6px">
      <template #columns>
        <a-table-column title="Name">
          <a-table-column title="First Name" data-index="first"></a-table-column>
          <a-table-column title="Last Name" data-index="last"></a-table-column>
        </a-table-column>
        <a-table-column title="Salary" data-index="salary"></a-table-column>
        <a-table-column title="Address" data-index="address"></a-table-column>
        <a-table-column title="Email" data-index="email"></a-table-column>
        <a-table-column title="Optional">
          <template #cell="{ record }">
            <a-button>view</a-button>
          </template>
        </a-table-column>
      </template>
    </a-table>

    <div style="color:#f60000">{{myData2}}</div>

    <a-table :bordered="{cell:true}" stripe :pagination="false" :data="myData2" style="margin-top: 6px">
      <template #columns>
        <a-table-column title="Name">
          <template #cell="{ record, column, rowIndex }">
            <a-input v-model="myData2[rowIndex].Name" />
          </template>
        </a-table-column>
        <a-table-column title="User Info">
          <a-table-column title="Birth" data-index="Birth"></a-table-column>
          <a-table-column title="Address">
            <a-table-column title="City" data-index="City"></a-table-column>
            <a-table-column title="Road" data-index="Road"></a-table-column>
            <a-table-column title="No" data-index="No"></a-table-column>
          </a-table-column>
        </a-table-column>

        <a-table-column title="Information">
          <a-table-column title="Email" data-index="Email"></a-table-column>
          <a-table-column title="Phone" data-index="Phone"></a-table-column>
        </a-table-column>

        <a-table-column title="Salary" data-index="Salary"></a-table-column>
        <a-table-column title="Operate">
          <template #cell="{ record, column, rowIndex}"><a-button @click="view(record, column, rowIndex)">view</a-button></template>
        </a-table-column>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import {reactive, ref, onMounted, defineProps, defineEmits, nextTick} from "vue";
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

const state = reactive({
  stuId: 0,
})
const myData = reactive([]);
const myData2 = reactive([
  {id:1000,Name : '陈宾', Birth : '2025-01-06', City : '济南', Road : '福泰路', No : '2026弄', Email : 'cbhisoft@163.com', Phone : '15705418072', Salary : 6588},
  {id:1001,Name : '陈宾2', Birth : '2023-01-06', City : '济南', Road : '福泰路', No : '2023弄', Email : 'cbmaike@163.com', Phone : '15705418073', Salary : 8888}
]);
const view = (record, column, rowIndex)=>{
  console.log(record,column,rowIndex)
}
onMounted(()=>{
  state.stuId = route.query.stuid || 0;
})
</script>

<style scoped>

</style>
